<template>
  <!-- 工单详情 -->
  <div class="detailsHer_box">
    <!-- 个人信息 -->
    <div class="detailsHer" v-if="workdetail.status != 0">
      <img :src="workdetail.water_user.water_avatar == '' ? '/static/images/avatar.png' : workdetail.water_user.water_avatar" alt="头像" />
      <div class="detailsHer_name">
        <span>接单师傅：{{workdetail.water_user.water_user_name}}</span>
        <span>联系电话：{{workdetail.water_user.water_mobile}}</span>
      </div>
    </div>

    <!-- 工单详情 -->
    <ul class="G_details">
      <li>
        <span>工单号:</span>
        <span>{{workdetail.number}}</span>
      </li>
      <li>
        <span>工种类别：</span>
        <span>{{workdetail.title}}</span>
      </li>
      <li>
        <span>工单费用：</span>
        <span>¥{{workdetail.door_fee}}</span>
      </li>
      <li>
        <span>预约时间：</span>
        <span>{{workdetail.add_time}}</span>
      </li>
      <li>
        <span>预约地址：</span>
        <span>{{workdetail.address}}</span>
      </li>
      <li>
        <span>情况描述：</span>
        <span>{{workdetail.excerpt}}</span>
      </li>
    </ul>

    <!-- 维修图片 -->
    <div class="repairimg">
      <div class="repairimgname">维修图片</div>
      <div class="repair_img" v-if="workdetail.images.length > 0">
        <img v-for="(imgItem,index) in workdetail.images" :key="index" :src="imgItem" alt="图片" />
      </div>
      <div class="tishi" v-else>暂无维修图片</div>
      <!-- <img v-else src="" /> -->
      <div>
        <span>备注:</span>
        <span>{{workdetail.remark == '' ? '客户无备注' : workdetail.remark}}</span>
      </div>
    </div>

    <!-- but -->
    <div v-if="workdetail.status == 0" @tap="onCreateWater(workdetail.id)" class="detailsBut">确定抢单</div>
    <div v-else @tap="Tolistdetails(workdetail.id,workdetail.status)" class="detailsBut">去完成</div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      id: '',
      user: '',
      status: 0,
      workdetail: {
        add_time: "2020.09.29 17:45:43",
        address: "湖北省武汉市",
        appointment_time: "2020.08.20 09:30:00",
        cate_id: 10,
        door_fee: "0.00",
        excerpt: "水龙头故障、混水龙头",
        fenishi_time: "1970.01.01 08:00:00",
        id: 158,
        images: [],
        mobile: "18621572065",
        number: "HQ20200929157",
        remark: "",
        title: "给水维修",
        uid: 26,
        water_user: {
          water_avatar: "https://hsh.yuranai.cn/uploads/store/commom/20201123/98e684ca49da45267071acf04c912839.png",
          water_mobile: "13564603138",
          water_user_name: "武汉昱然1"
        },
        water_user_id: 26,
        woker_add_time: 1606268146
      },
    }
  },
  onShow() {
    this.request({
      url: this.baseUrl + '/api/wechatapp/workdetail',
      data:{
        id: this.id
      },
      method: 'GET',
    })
    .then(result=>{
      if(result.status == 200){
        this.workdetail = result.data
        // console.log(this.workdetail)
        // console.log(this.imageFile1)
      } else {
        return false
      }
    })
  },
  onLoad(option) {
    this.id = option.id
    this.status = option.status
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    onCreateWater(id) {
      // console.log(id)
      let mobile =  wx.getStorageSync("mobile")
      this.request({
        url: this.baseUrl + '/api/edit/waterUser',
        data:{
          type: 1,
          mobile: mobile
        },
        method: 'POST',
      })
      .then(result=>{
        if(result.status == 200){
          this.user = result.data.user_login
          this.request({
            url: this.baseUrl + '/api/wechatapp/createWater',
            data:{
              water_id: id,
              water_user_id: this.user.id,
            },
            method: 'POST',
          })
          .then(result=>{
            if(result.status == 200){
              console.log(result)
              wx.navigateTo({
                url: "/pages/success/main",
              })
              return true
            } else {
              wx.showModal({
                title: '抢单人账号正在审核中',
                content: '',
                success: function (res) {
                  if (res.confirm) {
                    // console.log('用户点击确定');
                  } else if (res.cancel) {
                    // console.log('用户点击取消');
                  }
                }
              })
              return false
            }
          })
        } else {
          return false
        }
      })
    },
    Tolistdetails(id,status) {
      wx.navigateTo({
        url: "../listdetails/main?id=" + id + '&status=' + status
      })
    },
  },
  components: {},
};
</script>

<style scoped >
.detailsHer {
  display: flex;
  align-items: center;
  background: #1677ff;
  padding: 40rpx;
}
.detailsHer_name {
  display: flex;
  flex-direction: column;
  color: white;
}
.detailsHer_name span {
  margin-bottom: 15rpx;
  margin-left: 40rpx;
}
.detailsHer_name > span:nth-child(2) {
  font-size: 25rpx;
}
.detailsHer img {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: #fff;
}
.G_details {
  background: #ffffff;
  margin: 20rpx 0;
  font-size: 25rpx;
}
.G_details li {
  display: flex;
  padding: 20rpx;
}
.G_details li > span:nth-child(1) {
  flex: 3;
  color: #666666;
}
.G_details li > span:nth-child(2) {
  flex: 7;
  color: #999999;
}
.repairimg {
  background: #ffffff;
  padding: 20rpx;
}
.repair_img {
  width: 100%;
  height: auto;
}
.repair_img img {
  margin-right: 20rpx;
}
.repairimg img {
  width: 144rpx;
  height: 144rpx;
  background-color: #eee;
}
.repairimg > div:nth-child(1) {
  margin: 20rpx 0;
}
.repairimg > div:nth-child(3) {
  margin: 20rpx 0;
  padding: 20rpx 0;
  border-top: 1rpx solid #f5f5f5;
  display: flex;
}
.repairimg > div:nth-child(3) > span:nth-child(1) {
  flex: 3;
}
.repairimg > div:nth-child(3) > span:nth-child(2) {
  flex: 7;
  color: #999999;
}
.servicename {
  margin: 30rpx 20rpx;
}
.tup {
  width: 144rpx;
  height: 144rpx;
  line-height: 128rpx;
  text-align: center;
  border: 2rpx solid #cccccc;
  font-size: 121rpx;
  color: #cccccc;
}
.serviceimg img {
  width: 128rpx;
  height: 128rpx;
  background-color: #1677ff;
  margin: 30rpx;
}
.serviceimg {
  background: #ffffff;
  display: flex;
}
.serviceimg > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20rpx;
}
.detailsBut {
  padding: 20rpx 0;
  text-align: center;
  background: #1677ff;
  color: #ffffff;
  margin: 60rpx 40rpx;
  border-radius: 10rpx;
}
</style>
